<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
    <router-link to="/user/foo">Go to User foo</router-link>
    <router-link to="/user/bar">Go to User Bar</router-link>
    <a @click="sss(1)" style="cursor: pointer;">点击测试</a>
    <a @click="sss(2)" style="cursor: pointer;">点击测试2</a>
    <a @click="forward" style="cursor: pointer;">前进</a>
    <a @click="back" style="cursor: pointer;">后退</a>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
   <keep-alive>
         <router-view class="view one"></router-view>
   </keep-alive>
  <router-view class="view two" name="a"></router-view>
  <router-view class="view three" name="b"></router-view>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
const Foo = { template: '<div>'+Math.random()+'foo</div>' };
const Bar = { template: '<div>'+Math.random()+'bar</div>' };
const User = {
  template: 
    '<div class="user"><h2>User {{ $route.params.id }}</h2><router-view></router-view></div>'
}
const Child = { template: '<div>child {{ $route.query.id }}</div>' };

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
  ,
  { path: '/user/:id', 
  		component: User,
  		children: [
	      {
	        // 当 /user/:id/profile 匹配成功，
	        // UserProfile 会被渲染在 User 的 <router-view> 中
	        path: 'child',
	        component: Child
	      }
	    ] 
   },
    {
      path: '/:id',
      components: {
        default: Foo,
        "a": Bar,
        b: User
      }
    }
]


console.log(routes);

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})



// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router,
  methods:{
  	sss:function(val){
  		if(val == 1){
	  		var id = "1111";
	  		router.push({ path: '/user/sss/child',query: {id: id}})
  		}else if(val == 2){
  			router.push({ path: '/mmmm'})
  		}
  	},
  	forward:function(){
  		router.go(1)
  	},
  	back:function(){
  		router.go(-1)
  	}
  }
}).$mount('#app')

</script>
</html>